<template>
  <a-drawer 
    title="任务详情"
    wrapClassName="weiben-private-drawer"
    width="70%"
    :closable="false"
    :maskClosable="true"
    :visible="visible"
    :after-visible-change="afterVisibleChange"
    @close="onClose"
  >
    <a-spin :spinning="loading">
      <div class="wms-task-management-detail-div">
        <div class="drawer-content">
          <a-table :columns="columns" :data-source="list" row-key="id" :pagination="false">
            <template slot="index" slot-scope="text, record, index">{{index+1}}</template>
          </a-table>
        </div>
      </div>
    </a-spin>
  </a-drawer>
</template>

<script>
import { WmsTaskDetail } from '@/api/modular/main/WmsTaskManage'
export default {
  name:'wmsTaskManagementDetailDrawer',
  emits:['update:visible'],
  props:{
    visible:{
      type:Boolean,
      default:false
    },
    row:{
      type:Object,
      default:function(){
        return {}
      }
    }
  },
  data(){
    return {
      loading:false,
      list:[],
      columns:[
        {
          dataIndex:'index',
          title:'序号',
          fixed:'left',
          width:'60',
          scopedSlots: { customRender: 'index' }
        },
        {
          dataIndex:'materialNo',
          title:'物料编号'
        },
        {
          dataIndex:'materialName',
          title:'物料名称'
        },
        {
          dataIndex:'materialSpec',
          title:'尺寸'
        },
        {
          dataIndex:'shipNo',
          title:'船号'
        },
        {
          dataIndex:'drawingNo',
          title:'图号'
        }
      ]
    }
  },
  methods:{
    onClose(){
      this.close()
    },
    close(){
      this.$emit('update:visible',false)
    },
    afterVisibleChange(visible){
      if (visible) {
        this.initShow()
      } else {
        this.afterClsoe()
      }
    },
    initShow(){
      this.loading = true;
      this.getList(()=>{
        this.loading = false;
      })
    },
    getList(callback){
      let params = {OrderNo:this.row.orderNo}
      WmsTaskDetail(params).then(d=>{
        this.list = d.data || []
        callback && callback(true)
      }).catch(()=>{
        callback && callback(false)
      })
    },
    afterClsoe(){
      this.list = []
    }
  }
}
</script>

<style lang="less" scoped>
.wms-task-management-detail-div{
  height:100%;
  overflow: auto;
  .drawer-content{
    padding: 16px;
  }
}
</style>